<template>
  <div class="body">
    <!-- 顶部信息栏 -->
    <div class="top_information">
      <div style="display: flex; align-items: center; justify-content: center; text-align: center;">
        <el-icon :size="60" color="#736EFE">
          <Sell/>
        </el-icon>
        <span style="display: block; font-size: 26px; color: #736EFE; margin-left: 8px;">商品管理系统</span>
      </div>
      <div class="user_info">
        <img :src="data.user.avatar ||default_avatar" alt="用户头像" style="width: 40px;height: 40px"/>
        <span style="font-size: 20px; color: #ffffff; padding: 0 10px;">{{ data.user.shopname }}</span>
        <el-button @click="logout" type="primary" size="large">退出登录</el-button>
      </div>
    </div>
    <!-- 中间页面 -->
    <div class="main_content">
      <!-- 左侧导航 -->
      <div class="navigator">
        <el-menu
            router
            :default-active="currentRoute"
            style="border: none"
            :default-openeds="['1']"
            active-text-color="#ffd04b"
            background-color="#32CCBC"
            class="el-menu-vertical-demo"
            text-color="#fff"
        >
          <el-sub-menu index="/business">
            <template #title>
              <el-icon>
                <House/>
              </el-icon>
              <span>我的</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/business/shop">
                <el-icon>
                  <Avatar/>
                </el-icon>
                店铺信息
              </el-menu-item>
              <el-menu-item index="/business/order">
                <el-icon>
                  <DataAnalysis/>
                </el-icon>
                商城详情
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Operation/>
              </el-icon>
              <span>物品及订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/business/item">
                <el-icon>
                  <Present/>
                </el-icon>
                商品管理
              </el-menu-item>
              <el-menu-item index="/business/orders">
                <el-icon>
                  <List/>
                </el-icon>
                订单管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="/refund">
            <el-icon>
              <Setting/>
            </el-icon>
            <span>退款订单</span>
          </el-menu-item>
          <el-menu-item index="/news">
            <el-icon>
              <Document/>
            </el-icon>
            <span>最新消息</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧主页内容 -->
      <div class="main_content_area">
        <RouterView :key="router" @updatePerson="updatePerson"></RouterView>
      </div>
    </div>

</div>
</template>
  <script setup>
import {reactive, computed} from "vue";
import {useRoute} from "vue-router";
import {
  Sell,
  House,
  Present,
  List,
  Operation,
  Setting,
  Document, Avatar, DataAnalysis
} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import '@/assets/css/BusinessManager.css'

import default_avatar from '@/assets/img/default_avatar.png'

const data = reactive({
  user: JSON.parse(localStorage.getItem("information") || "{}"), // 默认为空对象
  isCollapse: false
});

// 计算当前激活的路由路径
const currentRoute = computed(() => useRoute().path);

const logout = () => {
  localStorage.removeItem("information");
  location.href = "/login";
};
const updatePerson = () => {
  data.user = JSON.parse(localStorage.getItem("information"));
}
</script>
